﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        h2 {
            text-align: center;
        }

        .form-section {
            margin: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        select,
        input,
        textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        textarea {
            height: 100px;
        }

        #add-node {
            padding: 8px 16px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }

        .flow-chart {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        .node {
            width: 50px;
            height: 50px;
            border: 1px solid #ccc;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px;
        }

        .step-node {
            border-radius: 5px;
            width: 100px;
        }

        .start-node {
            background-color: #f0f0f0;
        }

        .end-node {
            background-color: #f0f0f0;
        }

        .arrow {
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid #ccc;
            margin: 0 10px;
        }

        .button-group {
            text-align: center;
            margin-top: 20px;
        }

        #close-button,
        #confirm-button {
            padding: 8px 16px;
            margin: 0 5px;
        }

        #confirm-button {
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }

        /* 新增的样式，使两个文本框一行显示 */
        .form-group.two-in-row {
            display: flex;
            flex-wrap: wrap;
        }

           .form-group.two-in-row label,
           .form-group.two-in-row select,
           .form-group.two-in-row input {
                flex: 1 0 calc(50% - 10px); /* 每个元素占 50% 宽度，减去一些间距 */
                margin-right: 10px; /* 元素之间的间距 */
            }

           .form-group.two-in-row label {
                width: 100%; /* 确保 label 独占一行 */
            }

        /* 加载动画 */
        .loading {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        .spinner {
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }


    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>新增审批流程</title>
</head>

<body>
    <div class="loading" id="loading">
        <div class="spinner"></div>
    </div>
    
    <h2>新增审批流程</h2>
    <div class="form-section">
        <h3>基础信息</h3>
        <div class="form-group two-in-row">

            <label for="approval">* 所属表单</label>
            <select id="approval">
                <option value="">请选择所属表单</option>
                <option value="采购表单">采购表单</option>
                <option value="销售表单">销售表单</option>
            </select>
        </div>
        <div class="form-group two-in-row">

            <label for="process">* 审批流程名称</label>
            <input type="text" id="process" placeholder="请输入项目名称">
        </div>
        <div class="form-group">
            <label for="instructions">审批说明</label>
            <textarea id="instructions" placeholder="请输入"></textarea>
        </div>
    </div>
    <div class="form-section">
        <h3>流程设置</h3>
        <button id="add-node">添加节点</button>
        <div class="flow-chart">
            <div class="node start-node">开始</div>
            <div class="node step-node">发起人申请</div>
            <div class="node end-node">结束</div>
        </div>
    </div>
    <div class="button-group">
        <button id="close-button">关闭</button>
        <button id="confirm-button">确定</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            // 给确定按钮绑定点击事件
            $('#confirm-button').click(function () {
                // 显示加载动画
                $('#loading').show();

                // 获取表单数据
                var approval = $('#approval').val();
                var process = $('#process').val();
                var instructions = $('#instructions').val();

                // 构建要发送的数据对象
                var dataToSend = {
                    addroveid: 0,
                    approval: approval,
                    process: process,
                    instructions: instructions,
                    belongto: "",
                    userid: 0,
                    userNiken: "",
                    roleid: 0,
                    roleName: "",
                    status: 0,
                    appstatus: "",
                    appDate: "2025-11-11"
                };

                // 发送 AJAX 请求
                $.ajax({
                    url: 'http://localhost:5090/api/WrokOrder/PrrApproval', // 请替换为实际的服务器端接收数据的 URL
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(dataToSend),
                    beforeSend: function () {
                        // 在请求发送前禁用按钮并更改文本
                        $('#confirm-button').text('正在提交...').prop('disabled', true);
                    },
                    success: function (res) {
                        // 请求成功处理逻辑
                        if (res.code===212) {
                            alert('审批流程添加成功！');
                            // 可以添加重置表单等操作
                            $('#approval').val('');
                            $('#process').val('');
                            $('#instructions').val('');
                        } else {
                            alert('审批流程添加失败：' + res.message);
                        }
                    },
                    error: function (error) {
                        // 请求失败处理逻辑
                        console.error('请求出错：', error);
                        alert('请求出错：' + error.statusText);
                    },
                    complete: function () {
                        // 隐藏加载动画
                        $('#loading').hide();
                        // 请求完成后恢复按钮状态
                        $('#confirm-button').text('确定').prop('disabled', false);
                    }
                });
            });
        });
    </script>
</body>

</html>